<template>
  <div class="login">
    <div class="left"><img src="@/assets/login/svg.png" alt="" /></div>
    <div class="right">
      <div class="right-text">
        <div style="font-size: 22px">Aike Ai跨境出海引流系统</div>
        <div>版本号：V0.1.0</div>
      </div>

      <el-form
        label-width="0"
        size="large"
        style="max-width: 360px; min-width: 300px"
      >
        <el-form-item>
          <el-input v-model="username" placeholder="请输入账号" class="input_div">
            <template #prefix>
              <el-icon><User /></el-icon>
            </template>
          </el-input>
        </el-form-item>
        <el-form-item>
          <el-input v-model="password" type="password" show-password placeholder="请输入密码">
            <template #prefix>
              <el-icon><Unlock /></el-icon>
            </template>
          </el-input>
        </el-form-item>
        <el-form-item class="from-yan">
          <el-input placeholder="请输入验证码" style="width: 260px; margin-top: -14px">
            <template #prefix>
              <el-icon><Cellphone /></el-icon>
            </template>
          </el-input>
          <verification-code :changeCode.sync='identifyCode'></verification-code>
        </el-form-item>
        <el-form-item style="margin-top: -20px">
          <div>
            <el-radio-group v-model="radio">
              <el-radio :label="1" size="large">记住密码</el-radio>
            </el-radio-group>
          </div>
          <div style="margin-left: 150px">忘记密码</div>
        </el-form-item>
        <el-form-item style="margin-top: -20px">
          <el-button type="primary" @click="loginClick" style="margin-left: 240px; width: 100px">登录</el-button>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<script>
import VerificationCode from '@/components/VerificationCode'

export default {
  data() {
    return {
      radio: 0,
      identifyCode:'',    //当前生成的验证码
      form: {
        username: '',
        password: ''
      }
    }
  },
  components: {
    VerificationCode
  },
  methods: {
    loginClick() {
      console.log("hhahah");
      this.$router.push("/aikeai");
    },
  },
};
</script>

<style scoped>
body {
  margin: 0;
  padding: 0;
  overflow-y: hidden;
}

.login {
  display: flex;
  justify-content: space-around;
  align-items: center;
  background-image: url("../assets/login/bg.jpg");
  background-size: 100% 100%;
  min-height: 100vh;
}

.login .right {
  background-color: white;
  color: black;
  border: 1px solid black;
  border-radius: 40px;
  padding: 40px 70px 40px 70px;
}

.input_div {
  border-top: 0 solid white;
}

.login .right .right-text {
  margin-bottom: 20px;
}

.el-form-item__label {
  color: black;
}

.el-icon {
  font-size: 20px;
  color: #2E54EA;
}

.from-yan {
  display: flex;
  justify-content: center;
  flex-wrap: nowrap;
  align-items: center;
}

.el-input__wrapper {
  border-radius: 0 !important;
  box-shadow: none;
  border-bottom: 1px solid blueviolet;
}
</style>